/**
 * Created by zhouli on 2019/1/22
 * 渲染数据权限下面的条件细项--成本中心
 */
import React from 'react';
import {deepCopy, messages} from "share/common";
import {connect} from 'react-redux';
import {Select, Button, message} from 'antd';
import PDService from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/permission-data.service';
import ItemCostCenter from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/rule-item/item-cost-center';
//需要在这个里面去配置弹窗类型
import 'styles/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/rule-item/condition-item.scss';
import {
  conditionFieldArr,
  conditionItemExample
} from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/data-rule-model';
const Option = Select.Option;

class ConditionItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  //添加条件细项
  actionAddItem = () => {
    let condition = this.props.condition;
    let conditionItem = deepCopy(conditionItemExample);
    conditionItem.conditionSeq = this.props.itemIndex + 1;
    condition.conditionDetails.push(conditionItem);
    PDService.getPermissionData(condition, this.props.permissionData, true);
  };
  deleteAddItem = () => {
    let conditionEditing = this.props.condition;
    if (conditionEditing.conditionDetails.length > 1) {
      conditionEditing.conditionDetails.splice(this.props.itemIndex, 1);
      PDService.getPermissionData(conditionEditing, this.props.permissionData, true);
    } else {
      message.warning(messages('permission-setting.key26')/*必须有一个条件细项*/);
    }
  };
  //是否包含选择
  actionFieldCodeChange = (val) => {
    //todo
    //需要检测，这个条件细项是否有相同字段，不能重复添加，前端给出提示
    let conditionEditing = this.props.condition;
    let conditionItem = this.props.conditionItem;
    conditionItem.fieldCode = val;
    conditionEditing.conditionDetails[this.props.itemIndex] = conditionItem;
    PDService.getPermissionData(conditionEditing, this.props.permissionData, true);
  };
  //渲染字段细项，根据不同的模块字段
  renderItemByFieldCode = (conditionItem, condition) => {
    if (condition.entityCode === undefined ||
      condition.entityCode === null ||
      condition.entityCode === '') {
      return <div/>
    }
    if (conditionItem.fieldCode === undefined ||
      conditionItem.fieldCode === null ||
      conditionItem.fieldCode === '') {
      return <div className='no-select-field'> {messages('permission-setting.key51')/*请选择字段类型*/}
      </div>
    }
    if (conditionItem.fieldCode === "CostCenter") {
      return (
        <div>
          <div className='c-item-outer-wrap f-left'>
            <ItemCostCenter
              itemIndex={this.props.itemIndex}
              condition={this.props.condition}
              conditionItem={this.props.conditionItem}
              isEditing={this.props.isEditing}
            />
          </div>
          {/*占时隐藏按钮，因为只能添加一个规则*/}
          {false && this.props.isEditing && <div className='c-item-btn f-left'>
            <Button type='danger' onClick={this.deleteAddItem}>{messages('common.delete')/*删除*/}</Button>
          </div>}
          &nbsp;&nbsp;
          {false && this.props.isEditing &&
          this.props.isShowAddItem && <div className='c-item-btn f-left'>
            <Button type='primary' onClick={this.actionAddItem}>{messages('common.add')/*添加*/}</Button>
          </div>}
        </div>
      )
    } else {
      return (<div className='no-select-field'>其他字段待设计与开发...</div>)
    }
  };
  //渲染模块下面的字段，根据不同的模块
  renderFieldCodeByEntityCode = (condition) => {
    let conditionItem = this.props.conditionItem;
    if (condition.entityCode === 'Expense'||
      condition.entityCode === 'Application'||
      condition.entityCode === 'LoanApplication') {
      return (
        <div className='c-item-title f-left'>
          <Select
            style={{width: '200'}}
            disabled={!this.props.isEditing}
            value={conditionItem.fieldCode}
            placeholder={messages("common.please.select")}
            onChange={this.actionFieldCodeChange}
          >
            {conditionFieldArr.map(item => {
              return <Option value={item.fieldCode}>{item.fieldName}</Option>
            })}
          </Select>
        </div>
      )
    } else if (condition.entityCode === 'Expense1') {
      //todo
      //其他模块，需要不要的字段，需求还没定义完整
      // message.warning("目前只支持报销单模块")
    } else {
      // message.warning("目前只支持报销单模块")
    }
  };
  //渲染成本中心
  renderCostCenter = (conditionItem, condition) => {
    let mClass = 'c-module-wrap';
    if (this.props.isEditing) {
      mClass = 'c-module-wrap-editing'
    }
    return (
      <div className={mClass}>
        {this.renderFieldCodeByEntityCode(condition)}
        {this.renderItemByFieldCode(conditionItem, condition)}
        <div className='clear'/>
      </div>
    )
  };

  render() {
    return (
      <div className="condition-item-wrap">
        {this.renderCostCenter(this.props.conditionItem, this.props.condition)}
      </div>
    )
  }
}

ConditionItem.propTypes = {
  itemIndex: React.PropTypes.any.isRequired,// 条件细项序号
  //只在最后一个显示
  isShowAddItem: React.PropTypes.bool.isRequired,// 是否显示添加细项
  condition: React.PropTypes.object.isRequired,// 单个条件对象
  isEditing: React.PropTypes.any,// 是否在编辑
  conditionItem: React.PropTypes.object.isRequired,// 单个条件对象细项
};

ConditionItem.defaultProps = {};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    tenantMode: state.main.tenantMode,
    permissionData: state.permissionData.permissionData
  }
}

export default connect(mapStateToProps)(ConditionItem);

